<template>
  <div class="app-container" v-if="!isTeachingCenter && !isCourseDetail && !isClassroom">
    <!-- 顶部导航栏 -->
    <nav class="nav-bar">
      <div class="nav-content">
        <div class="logo">
          <div class="logo-bg">中软国际教育</div>
        </div>
        
        <div class="nav-links">
          <router-link 
            v-for="item in navItems" 
            :key="item.id" 
            :to="item.path"
            class="nav-item"
          >
            {{ item.name }}
          </router-link>
        </div>

        <div class="user-section">
          <div class="icon-item">
            <i class="iconfont">📱</i>
          </div>
          <div class="icon-item">
            <i class="iconfont">🔔</i>
          </div>
          <div class="user-dropdown" v-click-outside="closeDropdown">
            <div class="user-info-trigger" @click="toggleDropdown">
              <div class="user-avatar">
                <span class="avatar-text">我</span>
              </div>
              <div class="user-text">我的学习</div>
            </div>
            
            <div class="dropdown-menu" v-show="showDropdown">
              <div class="user-info">
                <div class="user-avatar-large">
                  <span class="avatar-text">我</span>
                </div>
                <div class="user-details">
                  <div class="user-name">田思泽</div>
                  <div class="user-subtitle">田思泽</div>
                </div>
              </div>
              <div class="menu-items">
                <div class="menu-item">
                  <i class="menu-icon">↔️</i>
                  <span>切换机构</span>
                </div>
                <div class="menu-item">
                  <i class="menu-icon">🏠</i>
                  <span>前往官网</span>
                </div>
                <div class="menu-item">
                  <i class="menu-icon">👤</i>
                  <span>前往门户</span>
                </div>
                <div class="menu-item">
                  <i class="menu-icon">📚</i>
                  <span>我的学习</span>
                </div>
                <div class="menu-item" @click="goToTeachingCenter">
                  <i class="menu-icon">🎓</i>
                  <span>教学中心</span>
                </div>
                <div class="menu-item">
                  <i class="menu-icon">⚙️</i>
                  <span>账号设置</span>
                </div>
                <div class="menu-item">
                  <i class="menu-icon">🚪</i>
                  <span>退出</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- banner区域 -->
    <div class="banner">
      <div class="banner-content">
        <div class="banner-text">2024中软卓越杯技术大赛</div>
        <div class="banner-subtext">第三赛季 | 大模型行业应用创新</div>
      </div>
    </div>
  </div>
  <router-view></router-view>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'

const navItems = ref([
  { id: 1, name: '首页', path: '/' },
  { id: 2, name: '公开课', path: '/public-courses' },
  { id: 3, name: '科研竞赛', path: '/competitions' },
  { id: 4, name: '考试认证', path: '/certifications' },
  { id: 5, name: '求职就业', path: '/jobs' },
  { id: 6, name: '人才服务', path: '/talent-services' },
  { id: 7, name: '开发者商城', path: '/dev-store' },
  { id: 8, name: '产品与解决方案', path: '/solutions' },
  { id: 9, name: '关于我们', path: '/about' }
])

const showDropdown = ref(false)

// 切换下拉菜单显示状态
const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value
}

// 关闭下拉菜单
const closeDropdown = () => {
  showDropdown.value = false
}

// 点击外部关闭下拉菜单的指令
const clickOutside = {
  mounted(el, binding) {
    el._clickOutside = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event)
      }
    }
    document.addEventListener('click', el._clickOutside)
  },
  unmounted(el) {
    document.removeEventListener('click', el._clickOutside)
  }
}

// 注册自定义指令
const vClickOutside = clickOutside

const route = useRoute()
const router = useRouter()
const isTeachingCenter = ref(false)
const isCourseDetail = ref(false)
const isClassroom = ref(false)

// 监听路由变化
watch(() => route.path, (newPath) => {
  isTeachingCenter.value = newPath === '/teaching-center'
  isCourseDetail.value = newPath.startsWith('/course/')
  isClassroom.value = newPath === '/classroom'
}, { immediate: true })

// 添加路由跳转方法
const goToTeachingCenter = () => {
  router.push('/teaching-center')
  showDropdown.value = false  // 跳转后关闭下拉菜单
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: white;
  color: #333;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  width: 160px;
}

.logo-bg {
  font-size: 18px;
  font-weight: bold;
  color: #002fa7;
}

.nav-links {
  display: flex;
  gap: 8px;
}

.nav-item {
  color: #666;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.nav-item:hover {
  background-color: #f5f7fa;
  color: #002fa7;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-item {
  cursor: pointer;
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  color: #666;
}

.icon-item:hover {
  background-color: #f5f7fa;
  color: #002fa7;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #002fa7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-text {
  color: white;
  font-size: 14px;
}

.user-text {
  font-size: 14px;
  color: #666;
}

.banner {
  margin-top: 60px;
  height: 300px;
  background: linear-gradient(135deg, #002fa7 0%, #1a90ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.banner-text {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 16px;
}

.banner-subtext {
  font-size: 20px;
  opacity: 0.9;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.user-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.user-info {
  padding: 0 16px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #002fa7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.user-subtitle {
  font-size: 14px;
  color: #666;
}

.menu-items {
  padding: 8px 0;
}

.menu-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #333;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-icon {
  font-size: 16px;
  width: 16px;
  text-align: center;
}

.user-info-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
</style>
